<template>
  <div class="section_common">
    <div class="main">
      <el-form ref="form" label-width="100px">
        <el-form-item label="分类" required>
          <el-select v-model="itemSpec" :filterable="true" size="mini" @change="selectItemSpec" placeholder="请选择">
            <el-option v-for="(item,index) in itemSpecs" :key="index"  :label="item" :value="item" ></el-option>
            <!--<el-option label="器材类" value="器材类"></el-option>
            <el-option label="道具类" value="道具类"></el-option>
            <el-option label="模特类" value="模特类"></el-option>
            <el-option label="消耗品" value="消耗品"></el-option>
            <el-option label="器材辅件" value="器材辅件"></el-option>
            <el-option label="常规办公" value="常规办公"></el-option>-->
          </el-select>
        </el-form-item>
        <el-form-item label="物品名称" required>
          <el-select v-model="itemName" :filterable="true" @change="selectItemName" size="mini" placeholder="请选择">
            <el-option v-for="(item,index) in itemNames" :key="index"  :label="item.itemName" :value="item.itemName"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="型号" required>
          <el-select v-model="type" :filterable="true" size="mini" @change="selectType" placeholder="请选择">
            <el-option v-for="(item,index) in types" :key="index"  :label="item.type" :value="item.type"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="物品规格" required>
         <!-- <el-select v-model="spec" :filterable="true" size="mini" placeholder="请选择">
            &lt;!&ndash;<el-option v-for="(item,index) in specs" :key="index"  :label="item.label" :value="item.value"></el-option>&ndash;&gt;
            <el-option value="台"></el-option>
            <el-option value="张"></el-option>
            <el-option value="个"></el-option>
            <el-option value="只"></el-option>
            <el-option value="支"></el-option>
          </el-select>-->
          <el-input v-model="spec" size="mini" readonly></el-input>
        </el-form-item>
        <el-form-item label="拥有数量" required>
          <el-input v-model="total" size="mini" type="number" readonly></el-input>
        </el-form-item>
        <el-form-item label="报废数量" required>
          <el-input v-model="num" size="mini" type="number"></el-input>
        </el-form-item>
        <el-form-item label="报废原因" required>
          <el-input v-model="scrapReason" size="mini"></el-input>
        </el-form-item>

        <van-steps direction="vertical" :active="active" active-icon="checked" active-color="#38f">
          <van-step v-show="oneShow">
            <van-image v-for="(item,index) in oneLd" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
              <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
            </van-image>
          </van-step>
          <van-step v-show="twoShow">
            <van-image v-for="(item,index) in twoLd" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
              <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
            </van-image>
          </van-step>
          <van-step v-show="threeShow">
            <van-image v-for="(item,index) in threeLd" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
              <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
            </van-image>
          </van-step>
          <van-step v-show="fourShow">
            <van-image v-for="(item,index) in fourLd" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
              <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
            </van-image>
          </van-step>

          <p style="font-size: 15px ;justify-content: center">抄送人：</p>
          <van-image src="http://wework.qpic.cn/wwhead/duc2TvpEgSSWiaVLaJnssaQhAwV9wqgTueeE8IC2UCp8BG20aDWFTWZZ895sRylCibRzNRMoGqJ3w/0" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
            <p style="font-size: 10px ;justify-content: center">邹威</p>
          </van-image>
        </van-steps>

        <el-form-item>
          <el-button type="primary" size="mini" @click="submitPost" >提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import {Image as VanImage,Toast, Calendar,Form ,Picker,Popup} from "vant";
  Vue.use(Calendar);
  Vue.use(Form);
  Vue.use(Picker);
  Vue.use(Popup);
  Vue.use(VanImage);
  export default {
    data() {
      return {
        wpdata:'',

        itemSpec:'',
        itemSpecs:['器材类' , '道具类' , '模特类' , '消耗品' , '器材辅件' , '常规办公','其他'],

        itemName:'',
        itemNames:[],
        type:'',
        types:[],
        spec:'',
        specs:[],
        num:'',
        total:'',
        scrapReason:'',
        active:"-1",//步骤索引,从0开始
        oneShow:false,//审批是否显示
        oneLd:[],
        twoShow:false,
        twoLd:[],
        threeShow:false,
        threeLd:[],
        fourShow:false,
        fourLd:[],

      };
    },
    created() {
      this.nowUser=JSON.parse(localStorage.getItem('userInfo')).userId;
      this.getLd();
      this.getToolStock();
    },

    methods: {
      selectItemSpec(value){
        console.log(value);
        this.itemNames = [];
        this.itemName = '';
        this.types = [];
        this.type = '';
        this.spec = '';

        if (this.itemSpec != ''){
          let specList = [];
          for (let i in this.wpdata) {
            if (value === this.wpdata[i].itemSpec){
              let str = {};
              str.id = this.wpdata[i].id;
              str.itemName = this.wpdata[i].itemName;
              specList.push(str)
            }
          }
          // this.itemNames = specList;
          // console.log(this.itemNames);
          var hash = {};
          var arr = [];
          arr = specList.reduce(function (item,next) {
            hash[next.itemName] ? '' : hash[next.itemName] = true && item.push(next);
            return item;
          },[])
          this.itemNames = arr;
        }
      },
      selectItemName(value){
        // console.log(value);
        this.types = [];
        this.type = '';
        this.spec = '';
        if (this.itemName != ''){
          let typeList = [];
          for(let i in this.wpdata){
            if (this.itemSpec === this.wpdata[i].itemSpec && value === this.wpdata[i].itemName){
              let str = {};
              str.id = this.wpdata[i].id;
              str.type = this.wpdata[i].type;
              typeList.push(str);
            }
          }
          this.types = typeList;
          // console.log(this.types);
        }

      },
      selectType(value){
        // console.log(value)
        this.spec = '';
        for(let i in this.wpdata){
          if (this.itemSpec === this.wpdata[i].itemSpec && this.itemName === this.wpdata[i].itemName && value === this.wpdata[i].type){
            this.spec = this.wpdata[i].spec
            this.total = this.wpdata[i].num
          }
        }
      },
      getLd(){
        this.$https.post('/mobiles/getPLeader',{
          userId:this.nowUser,
        }).then((res)=>{
          if (res.data.data.onespusers.length>0){
            this.oneShow=true;
            this.oneLd=res.data.data.onespusers;
          }
          if (res.data.data.twospusers.length>0){
            this.twoShow=true;
            this.twoLd=res.data.data.twospusers;
          }
          if (res.data.data.threespusers.length>0){
            this.threeShow=true;
            this.threeLd=res.data.data.threespusers;
          }
          if (res.data.data.fourspusers.length>0){
            this.fourShow=true;
            this.fourLd=res.data.data.fourspusers;
          }
        }).catch(err => {
          console.log(err);
        })
      },
      getToolStock(){
        this.$https.post('/mobiles/personalAssItem',{userId:this.nowUser}).then((res)=>{
          // console.log(res)
          this.wpdata = res.data.data;
          //拿到数据后遍历
          /*let articleFile = [];
          for(let i in this.wpdata){
            let str = {};
            str.id = this.wpdata[i].id;
            str.itemName = this.wpdata[i].itemName;
            articleFile.push(str);
          }
          this.itemNames = articleFile;*/
          // this.formatLacation(this.data,this.specs,'spec','spec')
        }).catch(err => {
          console.log(err);
        })
      },
      showPAtt(){
        this.showPickerAtt=true;
      },
      //格式化物品归宿地
      formatLacation(data,curr,foo,id){
        if(data){
          console.log(foo)
          for(let i=0;i<data.length;i++){
            console.log(data[i])
            curr.push({
              label:data[i][foo],
              value:data[i][id],
            })
          }
          console.log(curr)
        }
      },



      // 返回
      goBack() {
        this.$router.go(-1);
      },
      // 提交
      submitPost() {
        if (!this.isNull()) return false;
        if (this.total < this.num){
          this.$toast("申请报废数量不能大于拥有数量");
          return false;
        }
        this.$https.post('/mobiles/photographScrapAdd', {
          userId:this.nowUser,
          itemSpec:this.itemSpec,
          itemName:this.itemName,
          type:this.type,
          spec:this.spec,
          num: this.num,
          scrapReason:this.scrapReason,

        }).then(res => {
          console.log(res)
          Toast("申请成功");
          this.$router.go(-1);
        }).catch(err => {
          console.log(err)
        });
      },
      //判断相关数据是否为空
      isNull() {
        if (this.itemSpec == '') {
          this.$toast("请选择分类");
          return false;
        }
        if (this.itemName == '') {
          this.$toast("请选择物品名称");
          return false;
        }
        if (this.type=='') {
          this.$toast("请选择型号");
          return false;
        }
        if (this.spec=='') {
          this.$toast("请选择规格");
          return false;
        }
        if (this.num=='') {
          this.$toast("数量不能为空");
          return false;
        }
        if (this.scrapReason=='') {
          this.$toast("报废原因不能为空");
          return false;
        }
        return true;
      },

    },
  };
</script>

<style lang="scss" scoped>
  .main {
    background-color: white;
    .el-form {
      padding-right: 10px;
      .el-form-item {
        .el-form-item__label {
          line-height: 16px;
        }
        margin-bottom: 5px;
      }
    }
  }
</style>
